import { useState } from "react";
import TodoList from "./TodoList";
import { createTodos } from "../../utils/index";
const todos = createTodos();
export default function Home() {
  const [tab, setTab] = useState("all");
  const [isDark, setIsDark] = useState(false);
  return (
    <div className="home">
      <button onClick={() => setTab("all")}>all</button>
      <button onClick={() => setTab("active")}>active</button>
      <button onClick={() => setTab("completed")}>completed</button>
      <br />
      <label>
        <input
          type="checkbox"
          checked={isDark}
          onChange={(e) => setIsDark(e.target.checked)}
        ></input>
      </label>
      <TodoList todos={todos} tab={tab} theme={isDark ? "dark" : "light"}></TodoList>
    </div>
  );
}
